<template>
  <view class="container">
    <view class="logo"></view>
    <view class="title">社区医疗</view>

    <view class="login-section">
      <view class="login-title">登录</view>
      <input class="input" type="text" v-model="phone" placeholder="请输入登录手机号" />
      <input class="input" type="password" v-model="pwdmd5" placeholder="请输入密码" />
      <button class="login-btn" @click="onLogin">登录</button>
      <view class="register-tip">
        没有账户？
        <text class="register-link" @click="onRegisterClick">立即注册</text>
      </view>
    </view>
  </view>
</template>

<script setup lang="ts">
import { ref } from "vue";
import { loginApi } from "@/https/HomeHTTP";
import type { LoginParams } from "@/types/home"
import md5 from "js-md5";
import { useMemberStore } from "@/store";

// 定义响应式数据 手机号和密码
const phone = ref("");
const pwdmd5 = ref("");
// 定义一个变量 用来控制登录按钮的loading状态
const loading = ref(false);

// 触发点击登录之后执行
const onLogin = async () => {
  if (!phone.value || !pwdmd5.value) {
    uni.showToast({ title: '请输入手机号和密码', icon: 'none' })
    return
  }
  // 将动画加载变为ture
  loading.value = true
  // 将分散的表单数据（phone.value、pwdmd5.value）组合成接口需要的结构化数据。
  const params: LoginParams = {
    phone: phone.value,
    pwdmd5: md5(pwdmd5.value),
  }
  // 用于捕获和处理代码执行过程中可能出现的异常 防止程序崩溃
  console.log(params)
  try {
    // 调用登录接口
    const res = await loginApi(params)
    // 将token存储到本地
    console.log('登录返回：', res) // 加这一行
    const memberStore = useMemberStore()
    memberStore.setToken(res.data.token)
    memberStore.setIsLogin(true)
    memberStore.setUserPhone(res.data.user.phone)
    memberStore.setUserUid(res.data.user.uid)
    memberStore.setusername(res.data.user.name)
    uni.showToast({ title: '登录成功', icon: 'success' })

    uni.navigateTo({ url: '/pages/index/index' })
  } catch (error) {
    console.log('登录失败error:', error) // 加这一行
    uni.showToast({ title: '登录失败', icon: 'none' })
  }
}

// 点击跳转注册页面
function onRegisterClick() {
  uni.navigateTo({ url: '/pages/signup/signup' })
}
</script>

<style scoped>
.container {
  min-height: 100vh;
  background: #fbfffd;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-top: 48px;
}
.logo {
  width: 120px;
  height: 120px;
  background: #7fffd4;
  border-radius: 32px;
  margin-bottom: 12px;
}
.title {
  color: #666;
  font-size: 18px;
  text-align: center;
  margin-bottom: 48px;
}
.login-section {
  width: 90vw;
  max-width: 400px;
  background: transparent;
  border-radius: 12px;
  display: flex;
  flex-direction: column;
  align-items: stretch;
}
.login-title {
  font-size: 32px;
  font-weight: bold;
  color: #444;
  margin-bottom: 24px;
}
.input {
  height: 44px;
  margin-bottom: 12px;
  padding: 0 12px;
  border: none;
  border-bottom: 2px solid #3ee88f;
  background: #fff;
  font-size: 16px;
  outline: none;
}
.input:last-of-type {
  margin-bottom: 32px;
}
.login-btn {
  width: 300px;
  height: 48px;
  background: #16e06e;
  color: #fff;
  font-size: 22px;
  font-weight: bold;
  border: none;
  border-radius: 14px;
  margin-bottom: 18px;
  box-shadow: 0 4px 16px #16e06e33;
  display: flex;
  justify-content: center;
  align-items: center;
}
.register-tip {
  text-align: center;
  color: #888;
  font-size: 16px;
}
.register-link {
  color: #16e06e;
  font-weight: bold;
  margin-left: 4px;
}
</style>